<template>
  <div>
    <div class="amap-page-container">
      <el-amap-search-box 
        class="search-box" 
        :search-option="searchOption" 
        :on-search-result="onSearchResult">
      </el-amap-search-box>
      <el-amap 
        vid="amapDemo" 
        :center="center" 
        :zoom="zoom" 
        class="amap-demo"
        :plugin="plugin">
        <el-amap-marker
          :position="center" >
        </el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<style scoped>
.amap-page-container {
  height: 600px;
  position: relative;
}
.search-box {
  position: absolute !important;
  top: 10px;
  left: 20px;
}
</style>

<script>
export default {
  data() {
    let vm = this;
    return {
      zoom: 12,
      center: [121.329402, 31.228667],
      searchOption: {
        cityName: "无锡",
        citylimit: false
      },
      result: [],
      plugin: [
        {
          pName: "ToolBar", //工具条插件
          position: "LB"
        },
        {
          pName: "OverView"
          //isOpen:true//鹰眼是否打开
        },
        {
          pName: "Scale"
        },
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: "all",
          pName: "Geolocation", //定位插件
          showMarker: false,
          events: {
            init(o) {
              //定位成功 自动将marker和circle移到定位点
              o.getCurrentPosition((status, result) => {
                console.log(result);
                if (result && result.position) {
                  vm.center = [result.position.lng, result.position.lat];
                  vm.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
  methods: {
    onSearchResult(pois) {
      this.result = pois;
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
      }
    }
  }
};
</script>